<template>
  <div id="wrapper" class="pb-150">
    <!--顶部fixed部分-->
    <div class="mt-97"></div>
    <div class="bg-m1 f32 color-fff order_top_tip" v-show="mobileDetail.OrderStatus == 0||mobileDetail.OrderStatus == 1||mobileDetail.OrderStatus == 3||mobileDetail.OrderStatus == 4">
      <p class="line-40">
        <span class="icon_wait">交易中</span>
      </p>
    </div>

    <div class="bg-2a f32 color-fff order_top_tip" v-show="mobileDetail.OrderStatus == 5">
      <span class="icon_firm">交易成功</span>
    </div>
    <div class="bg-999 f32 color-fff order_top_tip" v-show=" mobileDetail.OrderStatus == 2">
        <span class="icon_fail">交易取消
             <em class="f28 ml-20" v-if="mobileDetail.RemarkForSeller"> 取消原因：{{mobileDetail.RemarkForSeller}}</em>

        </span>
    </div>

    <div class="detail_container bg-fff clearfix">
      <img class="game_logo fl" src="../../../../assets/images/default_img.jpg" v-if="!mobileDetail.goodsImg">
      <img class="game_logo fl" :src="mobileDetail.goodsImg" v-if="mobileDetail.goodsImg">
      <div>
        <p class="f30 color-000">{{mobileDetail.BizOfferName}}</p>
        <p class="f30 mt-20 color-000">￥{{mobileDetail.Price}}</p>
      </div>
    </div>

    <div class="detail_container bg-fff mt-20 border-bottom">
      <p class="f30 mb-30"><span class="color-666 pr-30">游戏区服</span><span class="color-000">{{mobileDetail.GameAreaName}} /{{mobileDetail.GameServerName}}</span></p>
      <p class="f30"><span class="color-666 pr-30">商品类型</span><span class="color-000">
        {{$route.query.TypeName}}</span></p>
    </div>

    <div class="detail_container bg-fff">
      <p class="f30 mb-30"><span class="color-666 pr-30">订单编号</span><span class="color-666">{{mobileDetail.OrderId}}</span>
        <a class="copy ml-20 color-666 f24" id="copy" :data-clipboard-text="mobileDetail.OrderId" @click="copy()">复制</a></p>
      <p class="f30"><span class="color-666 pr-30">下单时间</span>
        <span class="color-666">{{mobileDetail.CreatedDate|format}}</span>
      </p>
    </div>

    <div class="detail_container bg-fff mt-20 border-bottom">
      <p class="f30 mb-30">
        <span class="color-666 pr-30">商品价格</span>
        <span class="color-666 fr">￥{{mobileDetail.Price}}</span>
      </p>

      <p class="f30 mb-30" v-if="mobileDetail.SellerCommission">
        <span class="color-666 pr-30">交易服务费</span>
        <span class="color-666 fr">-￥{{mobileDetail.SellerCommission}}</span>
      </p>
      <p class="f30 mb-30" v-if="mobileDetail.SellerAnxinFee">
        <span class="color-666 pr-30">安心买</span>
        <span class="color-666 fr">-￥{{mobileDetail.SellerAnxinFee}}</span>
      </p>
      <p class="f30 mb-30" v-if="mobileDetail.ScreenShotFee">
        <span class="color-666 pr-30">截图服务费</span>
        <span class="color-666 fr">-￥{{mobileDetail.ScreenShotFee}}</span>
      </p>
      <p class="f30 mb-30" v-if="mobileDetail.BidPromotionFee">
        <span class="color-666 pr-30">置顶服务费用</span>
        <span class="color-666 fr">-￥{{mobileDetail.BidPromotionFee}}</span>
      </p>
      <p class="f30 mb-30" v-if="mobileDetail.VipSellerFee">
        <span class="color-666 pr-30">星级卖家推广费用</span>
        <span class="color-666 fr">-￥{{mobileDetail.VipSellerFee}}</span>
      </p>
    </div>
    <div class="total_container bg-fff border-bottom" v-if="mobileDetail.status != 6">
      <p class="f30 mb-30">
        <span class="color-m1 fr ml-30">￥{{(mobileDetail.Price - mobileDetail.SellerAnxinFee - mobileDetail.SellerCommission - mobileDetail.ScreenShotFee - mobileDetail.BidPromotionFee - mobileDetail.VipSellerFee).toFixed(2)}}</span>
        <span class="color-666 fr">实际收益</span>
      </p>
    </div>

    <div class="fixed-bottom mancon-btn pr-30 py-20 bg-fff border-top" v-if="mobileDetail.KefuQQ">
      <a class="f30 color-m1 border border-color cancel fr" @click="contactCustom()">联系客服</a>
      <i class="titcur fr"
         v-if="false"
         @click="whyClick(orderId)"></i></div>
  </div>
</template>
<script >
  import { mapState, mapGetters, mapActions } from 'vuex';
  import api from '../../../../api';
  import {complainResultFilter,cancelReasonFilter,formatTimeFilter} from 'components/common/filters';
  import Clipboard from 'clipboard';
  export default{
    data(){
      return{
        orderId:this.$route.query.orderId,
        id:this.$route.query.Id,
        url: location.protocol+'//'+location.hostname+'/api/mobile-order-service/rs/orderdata/getOrderIm',
        urlDb: 'http://gameid.5173.com/BankInfo.axd?methodName=GetOrderIMInfo',
      }
    },
    created(){
      let vm = this;
      console.log(vm.orderId)
      vm.$bus.emit('headerText','订单详情');
      vm.getMobileDetailPc(vm.orderId);
    },
    mounted(){
      this.$bus.emit('isBack',true);
      setTimeout(()=>{
        console.log('==============',this.mobileDetail)
      },2000)
    },
    computed:{
      ...mapState({
        mobileDetail:state =>{
          return state.orderMange.mobileDetailPc;
        }
      }),
      Profit:function  () {
        // - this.mobileDetail.insurance * 10000
        let price = parseInt(this.mobileDetail.totalAmount * 10000  - this.mobileDetail.commission * 10000);

        if (this.mobileDetail.isAxm && this.mobileDetail.axmType == 1) {
          price = price - this.mobileDetail.insurance * 10000;
        };
        return price/10000;
      }
    },
    methods:{
      ...mapActions({
        getMobileDetailPc:'member/MEMBER_SELLER_ORDER_MOBILE_DETAIL_TWO'
      }),
      whyClick(id) {
        let params ={
          orderId:id
        }
        api.memberSeller.openServicesQQ(params)
          .then((res)=>{
            if (!res.data.success && !res.data.serviceQQ) {
              this.$messagebox({
                message: `正在分配客服中，请稍后`
              })
              return;
            };
            this.$messagebox({
              message: `如点击联系客服无法启动QQ，请加客服QQ号(${res.data.serviceQQ})`
            })
          })
      },
      copy(){
        var clipboard = new Clipboard('#copy');
        clipboard.on('success', e => {
          this.$toast('复制成功')
          this.shareShow = false
          e.clearSelection();
        });
        clipboard.on('error', e => {
          this.$toast('复制失败')
          this.shareShow = false
          this.errbox = true
        });
      },
      goQQClik(qq){
        if(/baidu/i.test(navigator.userAgent.toLowerCase())||/MicroMessenger/i.test(navigator.userAgent.toLowerCase())){
          this.$messagebox({
            message: "如点击联系客服无法启动QQ，请加客服QQ号("+qq+")"
          })
        }else {
          window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + qq + '&version=1&src_type=web&web_src=oicqzone.com')
        }
      },
      goCustomer(val, url) {
          if (Object.keys(val).length) {
              if (val.DefaultIM==1 || (val.DefaultIM==2 && val.WYCustomService) || (val.DefaultIM==2 && !val.WYCustomService && val.IsOpenHX)) {
                  location.href=`/member/huanxin1.html?url=${encodeURIComponent(url)}`
              } else {
                  if(/baidu/i.test(navigator.userAgent.toLowerCase())||/MicroMessenger/i.test(navigator.userAgent.toLowerCase())){
                      this.$messagebox({
                          message: "如点击联系客服无法启动QQ，请加客服QQ号("+val.CustomServiceQQ+")"
                      })
                  }else {
                      window.location.assign('mqqwpa://im/chat?chat_type=wpa&uin=' + val.CustomServiceQQ + '&version=1&src_type=web&web_src=oicqzone.com')
                  }
              }
          }
      },
      contactCustom(){
        let url = ""
        if(this.orderId.substring(0,2)=="DB" ){
          url = this.$concatUrl({orderid:this.orderId,usertype:0,tradingtype:5,callback:'callback'}, this.urlDb)
        }else{
          url = this.$concatUrl({orderId: this.orderId, userType: 0, callback: 'callback'}, this.url)
        }
        api.BuyerCenterApi.getOrderIm(url).then(res => {
          if (res.data) {
            if (res.data.Order) {
                this.goCustomer(res.data.Order, url)
            }else {
                this.$toast({ message: '启动服务失败，请稍后重试' })
            }
          }
        })

      },
    },
    filters:{
      getGoodsTypeText(val){
        return val  === 1 ?'游戏装备':val === 2 ? '游戏帐号' : val === 3 ?'游戏币':'游戏帐号';
      },
      format: formatTimeFilter,
      returnTitle(val){
        let  data = JSON.parse(val);
        return data.Title;
      },
      complainResultFilter,
      cancelReasonFilter
    }
  }
</script>
<style  src="css/member/member-order.css" ></style>
